<template>
	<view class="dz-btn">
		<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
			<path hover d="M23.4061 54.9919L1 32.5891V23.4189L23.4143 1H32.5858L55 23.4109V32.581L32.5858 54.9919H23.4061Z" fill="url(#paint0_linear_315_6458)" stroke="#545477" stroke-width="2" />
			<defs>
				<linearGradient id="paint0_linear_315_6458" x1="28" y1="0" x2="28" y2="56" gradientUnits="userSpaceOnUse">
					<stop stop-color="#1D1D1F" />
					<stop offset="1" stop-color="#333337" />
				</linearGradient>
			</defs>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
		  <path d="M17.451 41.494L0.5 24.5454V17.4606L17.4571 0.5H24.5429L41.5 17.4546V24.5393L24.5429 41.494H17.451Z" fill="url(#paint0_linear_315_6459)" stroke="#373746"/>
		  <defs>
		    <linearGradient id="paint0_linear_315_6459" x1="21" y1="0" x2="21" y2="42" gradientUnits="userSpaceOnUse">
		      <stop stop-color="#1D1D1F"/>
		      <stop offset="1" stop-color="#333337"/>
		    </linearGradient>
		  </defs>
		</svg>
		<view class="icon-bd">
			<slot></slot>
		</view>
	</view>
</template>
<script setup>
</script>
<style scoped lang="scss">
	.dz-btn {
		position: relative;
		width: 56px;
		height: 56px;
		svg:nth-child(2) {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 1;
			transform: translate(-50%, -50%);
		}
		.icon-bd {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 2;
			transform: translate(-50%, -50%);
		}
	}
</style>